<template>
  <div id="app">
    <!--    <img alt="Vue logo" src="./assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <button @click="dowload">下载图片</button>

    <img
      :src="item.path"
      v-for="(item, index) in imgList"
      :key="index"
      alt=""
      style="width: 200px;height: 200px;margin-right: 10px"
    />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

import JSZip from "jszip";
import FileSaver from "file-saver";

export default {
  name: "App",
  components: {
    // HelloWorld
  },
  data() {
    return {
      imgList: [
        {
          name: "001.jpg",
          path:
            "https://yun.xssbdc.com/api/image/9f81f0de-4a30-4553-b17e-4e00443a9173.jpg"
        },
        {
          name: "002.jpg",
          path:
            "https://yun.xssbdc.com/api/image/50f10716-4316-4a84-9f20-4f62a2542116.jpg"
        },
        {
          name: "003.jpg",
          path:
            "https://yun.xssbdc.com/api/image/4c00cef6-2e4a-46d7-ae44-c88d7c1ff2ef.jpg"
        }
      ]
    };
  },
  methods: {
    getImage(path) {
      return new Promise(resolve => {
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;

          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);

          let url = canvas.toDataURL("image/jpeg"); // 得到图片的base64编码数据

          
          resolve({ base: url.substring(22) });
        };
        image.src = path;
      });
    },
    async dowload() {
     
      var blogTitle = "打包图片";
      var zip = new JSZip();
      var imgs = zip.folder(blogTitle);
      var baseList = [];
      // 要下载图片的url
      var arr = [];
      // 下载后图片的文件名，个数应与arr对应
      var imgNameList = [];
      for (let i = 0; i < this.imgList.length; i++) {
        arr.push(this.imgList[i].path);
        imgNameList.push(this.imgList[i].name);
      }
     
      for (let j = 0; j < arr.length; j++) {
        let rt = await this.getImage(arr[j]);
        baseList.push({ ...rt, path: arr[j] }); // 去掉base64编码前的 data:image/png;base64,

        if (baseList.length === arr.length && baseList.length > 0) {
          for (let k = 0; k < baseList.length; k++) {
            imgs.file(imgNameList[k], baseList[k].base, { base64: true });
          
          }
          zip.generateAsync({ type: "blob" }).then(function(content) {
            // see FileSaver.js
            FileSaver.saveAs(content, blogTitle + ".zip");
          });
        }
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
